<template>
  <el-container class="auth-container">
      <el-container style="display: flex; justify-content: center; align-items: center; height: 100vh;">
    <el-main>
      <el-card class="box-card" shadow="hover">
        <div class="clearfix">
          <span>新增人员</span>
        </div>
        <el-form ref="personForm" :model="personForm" label-width="120px" class="person-form" label-position="top">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="人员身份">
                <el-select v-model="personForm.identity" placeholder="请选择">
                  <el-option label="领队" value="leader"></el-option>
                  <el-option label="运动员" value="athlete"></el-option>
                  <el-option label="教练员" value="coach"></el-option>
                  <el-option label="随队人员" value="staff"></el-option>
                  <el-option label="队医" value="doctor"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="身份证号码">
                <el-input v-model="personForm.idNumber"></el-input>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker v-model="personForm.birthDate" type="date" placeholder="选择日期"></el-date-picker>
              </el-form-item>
              <el-form-item label="Email">
                <el-input v-model="personForm.email"></el-input>
              </el-form-item>
              
              <el-form-item label="照片">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :file-list="fileList">
                  <CirclePlusFilled style="margin: 0px 0 0 30px;" />
                </el-upload>
              </el-form-item>
              <el-form-item>
            <el-button type="primary" @click="saveAndClose" class="button">保存并关闭窗口</el-button>
          </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="personForm.name"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="personForm.gender">
                  <el-radio label="male">男</el-radio>
                  <el-radio label="female">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="组别">
                <el-input v-model="personForm.group"></el-input>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input v-model="personForm.phone"></el-input>
              </el-form-item>
              <el-form-item>
            <el-button type=“submitForm” @click="submitForm" class="button-right">填写完成报名</el-button>
          </el-form-item>
              <el-form-item>
            <el-button type="success" @click="saveAndContinue" class="button-right">保存并继续添加</el-button>
          </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';

const personForm = ref({
  identity: '',
  idNumber: '',
  birthDate: '',
  name: '',
  gender: '',
  group: '',
  phone: '',
  email: ''
});


const searchForm = ref({
  name: ''
});

const tableData = ref([
  // 这里可以添加表格的初始数据
]);

const search = () => {
  // 这里可以添加搜索的逻辑
  console.log('搜索', searchForm.value.name);
};

const addPerson = () => {
  // 这里可以添加新增人员的逻辑
  console.log('新增人员');
};

const edit = (row) => {
  // 这里可以添加编辑的逻辑
  console.log('编辑', row);
};

const deleter = (row) => {
  // 这里可以添加删除的逻辑
  console.log('删除', row);
};

const exportData = (row) => {
  // 这里可以添加导出的逻辑
  console.log('导出', row);
};
</script>

<style scoped>
.auth-container{
  color: #000000;
  width: 100%;
}

span{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
}
.box-card {
  background-color: #acacac;
  width: 76%;
  margin-left: 12%;
}
.person-form {
  margin-bottom: 20px;
}
.button{
  border-radius: 10px;

  width: 100%;
  background-color: #000000;
  margin: 0 auto 0 auto;
}
.button-right{
  border-radius: 10px;
  width: 100%;
  background-color: #000000;
  margin: 0 auto 0 auto;
  margin-top: 29px;
  color: white;
}
</style>